<template>
  <div class="login">
    <!-- 导航栏 代码省略-->
      <div class="login-title">登录</div>
    <!-- 登录页 用户表单 -->
      <van-field
        v-model="loginForm.username"
        label="帐号"
        placeholder="请填写帐号"
      />
      <van-field
        v-model="loginForm.password"
        clearable
        type="password"
        label="密码"
        placeholder="请输入密码"
        error-message=""
      />
      <!--登录按钮-->
    <div class="login-button">
      <van-button :color="color" :disabled="disabled" size="30" @click="onClickButtonSubmit" :loading="loading">登录</van-button>
    </div>
  </div>
</template>

<script>
  import loginService from "./login-service.js";

  import { Dialog } from 'vant';

  import Vue from 'vue';
  import { Cell, Field } from 'vant';
  Vue.use(Cell).use(Field);

  export default {
    name: 'login',
    data () {
      return {
        errors: [],
        loginForm:{
          username: "",
          password: "",
        },
        color:'#09BB07',
        disabled:true,
        loading:false
      }
    },
    methods:{
      // 表单提交
      onClickButtonSubmit: function () {
        this.loading=true;
        let data = {
          username:this.loginForm.username,
          password:this.loginForm.password,
        };
        loginService.login(data).then(result =>{
          let res = result.data;
          if(res.code == '0'){
              //登录成功！
            localStorage.setItem('user', JSON.stringify(res.result));
            console.log("res.result.id:"+res.result.id);

            // var url = "ws://127.0.0.1:8088/ws";
            let data={
              url:this.$webUrl,
              id:res.result.id
            }
            this.$websocket.dispatch('WEBSOCKET_INIT',data);
            this.$router.replace("/chat");
          }else{
            //用户名或者密码错误！
            Dialog.alert({
              message: res.msg
            }).then(() => {
              // on close
            });
          }

        }).catch(err => {

        }).finally(()=>{
          this.loading=false;
        })
      },
      validEmail: function (password) {
        var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return re.test(password);
      },
    },
    watch:{
      //监听表单 让按钮是是否可用
      loginForm: {
        handler(newName, oldName) {
            if(newName.username!='' && newName.password!= ''){
              this.disabled=false;
            }else{
              this.disabled=true;
            }
        },
        deep: true,
        immediate: true
    }
  }
}
</script>

<style scoped>
  .van-button{
    width: 90%;
    text-align: center;
    height: 36px;
    line-height: 35px;
    margin-top: 50px;
  }
  .login{
    width: 100%;
    height: 100vh;
  }
  .login-button{
    text-align: center;
  }
  .login-title{
    padding-left: 16px;
    padding-top: 90px;
    padding-bottom: 20px;
    font-size: 20px;
    font-weight: 400;
  }
  .van-cell{
    padding: 16px 16px;
  }
</style>
